<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--在这里写你的css-->
<div th:fragment="stylesheet">

    <!--<link rel="stylesheet" href="/static/common/assets/vendor/datatables/css-main/jquery.dataTables.min.css">-->
    <!--<link rel="stylesheet" href="/static/common/assets/vendor/datatables/css-bootstrap/dataTables.bootstrap.min.css">-->
</div>
<!--在这里写你的内容-->

<body id="test" th:fragment="content">
<div class="panel" style="padding: 10px">
    <div class="panel-heading">
        <h3 class="panel-title">查看新闻列表</h3>
    </div>
    <div class="panel-body">
        <div style="text-align: right">
            编号：<input id="searchId" type="text" class="form-control" style="width: 100px;display: inline">
            <button id="search" class="btn btn-default">搜索</button>
        </div>
        <table id="table" class="table table-striped table-hover">
            <thead>
            <tr>
                <th>编号</th>
                <th>标题</th>
                <th>关键字</th>
                <th>访问量</th>
                <th>更新时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr th:each="news:${news}">
                <td style="width: 10%" th:text="${news.newsId}"></td>
                <td style="width: 20%" th:text="${news.title}"></td>
                <td style="width: 10%" th:text="${news.keyword}"></td>
                <td style="width: 20%" th:text="${news.visits}"></td>
                <td style="width: 20%" th:text="${news.updateTime}"></td>
                <td style="width: 10%">
                    <nobr>
                        <button th:id="'del'+${news.newsId}" class="btn btn-success btn-sm" style="padding: 6px"
                                th:data-id="${news.newsId}" data-target="#detailModal" data-toggle="modal">详情
                        </button>
                        <button th:id="'edit'+${news.newsId}" class="btn btn-primary btn-sm" style="padding: 6px"
                                th:data-id="${news.newsId}" data-target="#editModal" data-toggle="modal">编辑
                        </button>
                        <button th:id="'del'+${news.newsId}" class="btn btn-danger btn-sm" style="padding: 6px"
                                th:data-id="${news.newsId}" data-target="#delModal" data-toggle="modal">删除
                        </button>
                    </nobr>
                </td>
            </tr>
        </table>
        <div id="paginationBar" style="text-align: center; bottom: 0%; position: center">
            <ul id="pageLimit"></ul>
        </div>
    </div>
</div>

<!-- END FILTER COLUMN -->
<!-- 删除-模态框（Modal） -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="delModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                <input id="idDel" type="text" class="hidden">
                <p>确定删除？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sureToDel" type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 编辑-模态框（Modal） -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="editModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                <input id="idValue" type="text" class="hidden">
                <form name="add_news">
                    <div>
                        <div class="box-body col-md-6">
                            <label for="newsId">新闻编号</label>
                            <input id="newsId" type="text" class="form-control" value="" placeholder="输入新闻编号" readonly="readonly">
                            <br>
                            <label for="title">标题</label>
                            <input id="title" type="text" class="form-control" placeholder="输入新闻标题">
                            <br>
                        </div>
                        <div class="box-body col-md-6">
                            <label for="keyword">关键字</label>
                            <input id="keyword" type="text" class="form-control" placeholder="输入关键字">
                            <br>
                            <label for="picture">选择图片</label>
                            <input type="file" id="picture" class="inputfile">
                            <br>
                        </div>
                        <div class="box-body" style="padding: 10px">
                            <label for="content">正文</label>
                            <textarea id="content" rows="10" class="form-control" style="resize: none; width: 100%"
                                      placeholder="输入正文"></textarea>
                            <br>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sureToUpdate" type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--详情-模态框（Modal）-->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="detailModalLabel">
                    详细信息
                </h4>
            </div>

            <table>
                <!--<tr style="width: 500px; text-indent: 4em">-->
                <tr>
                    <td id="d_newsId" style="width: 500px; text-indent: 4em"></td>
                    <td id="d_title" style="width: 500px"></td>
                </tr>
                <tr>
                    <td id="d_keyword" style="width: 500px; text-indent: 4em"></td>
                    <td id="d_visits"></td>
                </tr>
                <tr>
                    <td id="d_inputDate" type="date" style="width: 500px; text-indent: 4em"></td>
                    <td id="d_updateTime"></td>
                </tr>

            </table>
            <div style="padding: 50px">
                正文：<br>
                <textarea  readonly="readonly" style="width: 800px;height: 200px" id="d_content"></textarea>
            </div>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
</body>
<!--在这里定义或者引用你的script-->
<div th:fragment="script">

    <script>
        //删除
        $("#delModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            // alert(JSON.stringify(button))
            var id = button.data('id') //取得data-id 的值
            var modal = $(this)
            modal.find('.modal-body p').text('确定要删除编号为 ' + id + "的新闻信息吗")
            modal.find('.modal-body input').val(id)
        })
        $("#sureToDel").click(function () {
            var idDel = $("#idDel").val()
            $.post(
                "/contents/news/delete",
                {id: idDel},
                function () {
                    alert("删除成功")
                    $("#test").load(location.href + "#test");
                }
            )
        })

        //编辑
        $("#editModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id');//取得data-id 的值
            var modal = $(this);
            $.get(
                "/contents/news/selectById",
                {newsId: id},
                function (data) {
                    var news = data.value;
                    // alert(JSON.stringify(news))
                    modal.find('#newsId').val(news.newsId)
                    modal.find('#keyword').val(news.keyword)
                    modal.find('#title').val(news.title)
                    modal.find('#content').val(news.content)
                }
            )
        })
        $("#sureToUpdate").click(function () {
            $.post(
                "/contents/news/update",
                {
                    newsId: $("#newsId").val(),
                    keyword: $("#keyword").val(),
                    title: $("#title").val(),
                    content: $("#content").val(),
                },
                function (data) {
                    if(data.code==200){
                        alert("修改成功")
                        $("#test").load(location.href + "#test");
                    }
                    else
                        alert("修改失败")
                }
            )
        })

        //详细信息
        $("#detailModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id');//取得data-id 的值
            var modal = $(this);
            $.get(
                "/contents/news/selectById",
                {newsId: id},
                function (data) {
                    var news = data.value;
                    modal.find('#d_newsId').text("新闻编号：" + news.newsId)
                    modal.find('#d_title').text("标题：" + news.title)
                    modal.find('#d_keyword').text("关键字：" + news.keyword)
                    modal.find('#d_visits').text("访问量：" + news.visits)
                    var input = news.inputDate
                    modal.find('#d_inputDate').text("添加日期：" + input.year+"-"+input.month+"-"+input.dayOfMonth)
                    var up = news.updateTime
                    modal.find('#d_updateTime').text("更新日期：" + up.year+"-"+up.month+"-"+up.dayOfMonth)
                    modal.find('#d_content').text(news.content)
                }
            )
        })
    </script>


    <script src="/static/common/assets/vendor/paginator/bootstrap-paginator.min.js"></script>
    <script>
        $("#search").click(function () {
            var id = $("#searchId").val();
            if ($.trim(id) == "") {
                $("#test").load("/test/newsInfo?page=1");//重新加载整个<body>,定位到第一页
            }
            else if (id != "") {
                $.get(
                    "/contents/news/selectById",
                    {newsId: id},
                    function (data) {
                        $("#tbody").html("");
                        $("#paginationBar").html("");
                        var news = data.value;
                        // alert(JSON.stringify(news.updateTime));
                        var str =
                            "<tr>" +
                            "<td style=\"width: 10%\" >" + news.newsId + "</td>\n" +
                            "<td style=\"width: 20%\" >" + news.title + "</td>\n" +
                            "<td style=\"width: 10%\" >" + news.keyword + "</td>\n" +
                            "<td style=\"width: 20%\" >" + news.visits + "</td>\n" +
                            "<td style=\"width: 20%\" >" + news.updateTime + "</td>\n" +
                            "<td style=\"width: 10%\" >\n" +
                            "    <nobr>\n" +
                            "        <button th:id=edit" + news.newsId + " class=\"btn btn-success btn-sm\" style=\"padding: 6px\" data-id=" + news.newsId + " data-target=\"#detailModal\" data-toggle=\"modal\">详情</button>\n" +
                            "        <button th:id=edit" + news.newsId + " class=\"btn btn-primary btn-sm\" style=\"padding: 6px\" data-id=" + news.newsId + " data-target=\"#editModal\" data-toggle=\"modal\">编辑</button>\n" +
                            "        <button id=del" + news.newsId + " class=\"btn btn-danger btn-sm\" style=\"padding: 6px\"   data-id=" + news.newsId + " data-target=\"#delModal\" data-toggle=\"modal\">删除</button>\n" +
                            "    </nobr>\n" +
                            "</td>"
                        "</tr>";
                        $("#tbody").append(str);
                    }
                )
            }
        })
    </script>

    <script th:inline="javascript" type='text/javascript'>
        var max = [[${maxPage}]];
        var cur = [[${currentPage}]];
        $('#pageLimit').bootstrapPaginator({
            currentPage: cur,
            totalPages: max + 1,
            size: "normal",
            bootstrapMajorVersion: 3,
            alignment: "right",
            numberOfPages: 5,
            // pageUrl:function(type, page, current){
            //     return "/test/hospitalInfo?page="+page
            // },
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },//改写分页按钮字样
            onPageClicked: function (event, originalEvent, type, page) {
                //根据点击的页面，刷新整个body
                $("#test").load("/test/newsInfo?page=" + page);
            }
        });
    </script>
</div>

</html>